<script setup lang="ts">
import { getDeviceListByClassId } from '@/api/device';
import { DeviceInfo } from '@/api/device/type';
import { router } from '@/router';
import { onMounted, ref, Ref } from 'vue';

const classId = defineModel() as Ref<string>;
const deviceList = ref([] as DeviceInfo[]);

onMounted(() => {
    if (classId.value == undefined) return;
    getDeviceListByClassId(classId.value).then((res) => {
        deviceList.value = res.data;
    })
})

const toInfo = (id: string) => {
    router.push({
        name: "DeviceInfo",
        query: {
            "id": id
        }
    });
}
</script>

<template>
    <div class="container">
        <div class="deviceList">
            <div v-for="(item, _index) in deviceList" class="item">
                <div class="left">
                    <div>设备名：{{ item.name }}</div>
                    <div>温度：{{ item.temperature }} °C</div>
                    <div>湿度：{{ item.humidity }} RH</div>
                    <div>光照强度：{{ item.lightMagnitude }} Lux</div>
                    <div>硫化氢浓度：{{ item.h2s }}</div>
                    <div>更新时间：{{ item.updated }}</div>
                </div>
                <div class="right">
                    <van-button type="primary" @click="toInfo(item.id)">查看详情</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.deviceList {
    width: 94;
    margin: 3%;
    .item {
        background-color: white;
        padding: 3%;
        width: 94%;
        border: 1px rgba(92, 94, 86, 0.42) solid;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        .left {
            width: 80%;
        }
        .right {
            width: 20%;
        }
    }
}
</style>